<script lang="ts" setup>
import { onMounted, ref } from "vue";
import WujieVue from "wujie-vue3";
import useModStore from "../store/mod.store";
import router from "../router";
const { findOne, initMod } = useModStore();
const props = defineProps<{
  id: string;
}>();
const target = ref<{
  id: number;
  name: string;
  code: string;
}>({
  id: 0,
  name: "",
  code: "",
});
onMounted(() => {
  initWujie();
});
const initWujie = async () => {
  await initMod();
  const res = findOne(Number(props.id));
  if (res && typeof res.id === "number") {
    target.value.id = res.id;
    target.value.name = res.name;
    target.value.code = res.code;
  }
  console.log("show target", target.value);
};
</script>

<template>
  <div class="mod-app" v-if="target.code">
    <div class="title" @click="router.push('/')">应用</div>
    <WujieVue
      width="100%"
      height="calc(100% - 30px)"
      :name="target.name"
      :url="`http://localhost:8085/mod/${target.code}/index.html`"
    ></WujieVue>
  </div>
</template>

<style scoped lang="scss">
.mod-app {
  .title {
    height: 30px;
  }
  width: 100vw;
  height: 100vh;
}
</style>
